<!DOCTYPE html>
<html lang="en-US" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <!-- ===============================================-->
        <!--    Document Title-->
        <!-- ===============================================-->
        <title>书籍信息</title>
        <!-- ===============================================-->
        <!--    基础应用-->
        <!-- ===============================================-->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <meta name="description" content=""/>
        <meta name="author" content=""/>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

        <!-- ===============================================-->
        <!--    Favicons-->
        <!-- ===============================================-->
        <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
        <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico">
        <link rel="manifest" href="assets/img/favicons/manifest.json">
        <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png">
        <meta name="theme-color" content="#ffffff">


        <!-- ===============================================-->
        <!--    Stylesheets-->
        <!-- ===============================================-->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&amp;display=swap"
              rel="stylesheet">
<!--        <link href="vendors/prism/prism.css" rel="stylesheet">-->
        <link href="assets/css/theme.css" rel="stylesheet"/>
        <link href="assets/css/user.css" rel="stylesheet"/>

        <link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">

        <!-- ===============================================-->
        <!--    导航栏目-->
        <!-- ===============================================-->
        <script src="js/jquery-3.5.1.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
        <script src="/assets/js/myjs/head.js"></script>



    </head>


    <body>

        <!-- ===============================================-->
        <!--    Main Content-->
        <!-- ===============================================-->
        <main>
            <!-- Navigation-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top " id="mynav">
                <div class="container px-4 px-lg-5">
                    <a class="navbar-brand" href="#!">XDDRead</a>

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4" id="navbarUl">

                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-outline-dark" type="submit">
                                <i class="bi-cart-fill me-1"></i>
                                Cart
                                <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                            </button>
                        </form>
                    </div>
                </div>
            </nav>


            <!--书籍信息显示-->
            <div class="container">
                <section id="new">
                    <div class="container">
                        <div class="row h-100 align-items-center">
                            <div class="col-auto p-0">
                                <div class="card border-0 h-100">
                                    <div class="card-body h-100 p-0 pe-4">
                                        <div class="d-flex align-items-start"><img
                                                src="assets/img/gallery/rectangle.png" alt="rectangle"/><img id="pic"
                                                                                                             alt="主图片"
                                                                                                             width="315"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5 col-lg-6 col-xl-7 mb-4">
                                <div class="bg-holder z-index--1"
                                     style="background-image:url(assets/img/gallery/quotation.png);background-position:top center;background-size:auto;">
                                </div>
                                <!--/.bg-holder-->

                                <h1 class="fw-normal lh-1 mt-4 mt-lg-0" id="bName"></h1>
                                <h4 class="fw-light" id="name"></h4>
                                <p class="mt-4 pe-xxl-8" id="comit"></p>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
            <!--    章节信息显示-->
            <div class="container">
                <div class="card">
                    <h5 class="card-header">章节信息</h5>
                    <div class="table-responsive text-nowrap">
                        <table class="table table-borderless">
                            <!--                        <thead>
                                                    <tr>
                                                        <th>Project</th>
                                                        <th>Client</th>
                                                        <th>Users</th>
                                                        <th>Status</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                    </thead>-->
                            <tbody id="body">
                            <!--    <tr>
                                    <td ><a href="##"
                                                                      class="fab fa-angular fa-lg text-black-50 me-3 ">
                                        第403章 在我的国土请说我们的语言  </a> </td>

                                </tr>-->

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </main>
        <!-- ===============================================-->
        <!--    myscript-->
        <!-- ===============================================-->
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: '/bookservlet',
                    dataType: 'json',
                    type: 'POST',
                    data: {option: 'getreadId'},
                    success: function (returnValue) {
                        var book = returnValue.book;
                        // alert(book.book_id);
                        $("#bName").text(book.book_name);
                        $("#name").text(book.book_author);
                        $("#comit").text(book.book_commit);
                        $("#pic").prop("src", book.book_picaddress);
                        // alert("yes");
                        var Cid = returnValue.Cid;

                        var count=0;
                        var tr = $("<tr>")
                        for (var i = 0; i < Cid.length; i++) {
                            count++;
                            // 读取文件名
                            var str = Cid[i];
                            var start = str.lastIndexOf('0');
                            var pagnum = str.slice(start+1,5);
                            var pagmsg = str.slice(5,str.length-4);
                            var td = $(
                                "                                <td ><a href=\"/bookservlet?option=saveChapterId&ChapterId="+ book.book_address+"/"+str +"\"\n" +
                                "                                                                  class=\"fab fa-angular fa-lg text-black-50 me-3 \">\n" +
                                "                                    第" +pagnum + "章 "+ pagmsg+" </a> </td>\n" +
                                "         \n"
                            )
                            // console.log(Cid[i * 3 + j].slice(lastIndexOf('0'),5));
                            tr.append(td)
                            console.log(count)
                            console.log(td)
                            if(count==3){

                                $("#body").append(tr);
                                count=0;
                                tr = $("<tr>")
                            }
                        }
                    }
                })
            })


        </script>


        <!-- ===============================================-->
        <!--    JavaScripts-->
        <!-- ===============================================-->
        <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
        <!--        <script src="vendors/popper/popper.min.js"></script>
                <script src="vendors/bootstrap/bootstrap.min.js"></script>
                <script src="vendors/anchorjs/anchor.min.js"></script>
                <script src="vendors/is/is.min.js"></script>
                <script src="vendors/fontawesome/all.min.js"></script>
                <script src="vendors/swiper/swiper-bundle.min.js"></script>
                <script src="vendors/fontawesome/all.min.js"></script>
                <script src="vendors/lodash/lodash.min.js"></script>
                <script src="assets/js/theme.js"></script>-->
        <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>

        <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Rubik:wght@300;400;500;600;700;800&amp;display=swap"
              rel="stylesheet">
    </body>

</html>
<div class="carousel-item">
    <div class="row h-100 align-items-center">
        <div class="col-auto p-0">
            <div class="card border-0 h-100">
                <div class="card-body h-100 p-0 pe-4">
                    <div class="d-flex align-items-start"><img src="assets/img/gallery/rectangle.png"
                                                               alt="rectangle"/><img
                            src="assets/img/gallery/student-review.png" alt="testimonials" width="315"/></div>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-lg-6 col-xl-7 mb-4">
            <div class="bg-holder z-index--1"
                 style="background-image:url(assets/img/gallery/quotation.png);background-position:top center;background-size:auto;">
            </div>
            <!--/.bg-holder-->

            <h1 class="fw-normal lh-1 mt-4 mt-lg-0">Ainara <br> Vergara</h1>
            <h4 class="fw-light">USA</h4>
            <p class="mt-4 pe-xxl-8">Eduprix is an ideal location for anybody who wants to learn something new or share
                what they know with others.  Eduprix is a worldwide platform for online learning that helps to connect
                with one another via knowledge. It comes highly recommended from my side. </p>
        </div>
    </div>
</div>
